<template>
  <el-dialog
    v-model="isShowDialog"
    :before-close="handleClose"
    title="收货"
    draggable
    width="60%"
    append-to-body
  >
    <div class="text__box">
      <div class="text_item">
        <span>入库单号：</span>
        <span>{{ headerData.receiptCode }}</span>
      </div>
      <div class="text_item">
        <span class="erpLabel">应收数量：</span>
        <span style="color: red">{{ headerData.totalNum }}</span>
      </div>
      <div class="text_item">
        <span class="erpLabel">商品品种：</span>
        <span style="color: red">{{ tableList.length }}</span>
      </div>
    </div>

    <vxe-table
      ref="tableRef"
      border
      show-overflow
      align="center"
      :data="tableList"
      height="500"
      :edit-rules="validRules"
      :row-config="{ isCurrent: true, isHover: true }"
    >
      <vxe-column type="seq" width="80" title="序号"></vxe-column>
      <vxe-column field="skuCode" width="220" title="商品编码"></vxe-column>
      <vxe-column field="skuName" width="220" title="商品名称"></vxe-column>
      <vxe-column field="skuAttr" width="220" title="商品属性"></vxe-column>
      <vxe-column field="totalNum" width="120" title="待收货数量"></vxe-column>
      <vxe-column field="waybillCode" width="200" title="快递单号"></vxe-column>

      <vxe-column field="receiptNum" width="120" title="实际收货数量">
        <!--        <template #header>-->
        <!--          <span style="color: red;">*</span>实际收货数量-->
        <!--        </template>-->
        <template #default="{ row }">
          <el-input
            v-model="row.receiptNum"
            @input="row.receiptNum = limitIntNumber(row.receiptNum)"
            clearable
          />
        </template>
      </vxe-column>
      <vxe-column field="qcPassNum" width="120" title="质量正品数量">
        <!--        <template #header>-->
        <!--          <span style="color: red;">*</span>质量正品数量-->
        <!--        </template>-->
        <template #default="{ row }">
          <el-input
            v-model="row.qcPassNum"
            @input="row.qcPassNum = limitIntNumber(row.qcPassNum)"
            clearable
          />
        </template>
      </vxe-column>
      <vxe-column field="batch" width="120" title="批次编号"></vxe-column>
      <vxe-column field="barcode" width="120" title="条码"></vxe-column>
      <vxe-column field="unitType" width="120" title="单位"></vxe-column>
      <vxe-column field="weight" width="120" title="重量"></vxe-column>
      <vxe-column field="volume" width="120" title="体积"></vxe-column>
      <vxe-column field="length" width="120" title="长cm"></vxe-column>
      <vxe-column field="width" width="120" title="宽cm"></vxe-column>
      <vxe-column field="height" width="120" title="高cm"></vxe-column>
    </vxe-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="openGroundDialog"> 保存 </el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <GroundingDialog
    v-if="isShow"
    ref="grounding"
    :isShowDialog="isShow"
    :dialog-data="dialogData"
    :receipt-id="props.rowData.receiptId"
    @cancel="closeGroundingDialog"
    @save="clickSave"
    @saveEnd="saveEnd"
  ></GroundingDialog>
</template>

<script setup>
import {
  getQueryB2BReceiptInfo,
  saveReceiptQcConfirmB2BReceipt,
} from "@/api/scApi";
import { getCurrentInstance, onMounted, ref } from "vue";

import GroundingDialog from "./groundingDialog.vue";

const { proxy } = getCurrentInstance();
const grounding = ref();
const props = defineProps({
  isShowDialog: {
    type: Boolean,
    default: false,
  },
  rowData: { type: Object },
});

const isShow = ref(false);

const validRules = ref({
  receiptNum: [
    { required: true, message: "不能为空" },
    {
      validator({ cellValue }) {
        // 模拟服务端校验
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (Number(cellValue) === 0) {
              reject(new Error("数量必须大于零"));
            } else {
              resolve();
            }
          }, 100);
        });
      },
    },
  ],
  qcPassNum: [
    { required: true, message: "不能为空" },
    {
      validator({ cellValue }) {
        // 模拟服务端校验
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (Number(cellValue) === 0) {
              reject(new Error("数量必须大于零"));
            } else {
              resolve();
            }
          }, 100);
        });
      },
    },
  ],
});

const emits = defineEmits(["cancel"]);

function handleClose() {
  emits("cancel");
}

const headerData = ref({});
let tableList = ref([]);
const dialogData = ref({});

function getList() {
  getQueryB2BReceiptInfo({
    receiptId: props.rowData.receiptId,
  }).then((res) => {
    if (res.code === 200) {
      tableList.value = res.data.details;
      headerData.value = res.data.header;
    }
  });
}

onMounted(() => {
  getList();
});

async function openGroundDialog() {
  const $table = proxy.$refs.tableRef;
  if ($table) {
    const errMap = await $table.validate(true);
    if (errMap) {
      console.log("校验失败！");
    } else {
      let receiptNum = 0;
      let qcPassNum = 0;
      tableList.value.forEach((item) => {
        receiptNum += Number(item.receiptNum);
        qcPassNum += Number(item.qcPassNum);
      });
      dialogData.value = { qcPassNum, receiptNum, putawayNum: qcPassNum };
      isShow.value = true;
    }
  }
}
function closeGroundingDialog() {
  isShow.value = false;
}
function saveEnd() {
  emits("cancel", true);
}

async function clickSave() {
  let params = {
    details: tableList.value,
  };
  saveReceiptQcConfirmB2BReceipt(params).then((res) => {
    if (res.code === 200) {
      grounding.value.clickSavePutawayPercent();
    }
  });
}
</script>

<style scoped lang="scss">
.text__box {
  display: flex;
  margin: 10px 0;
  .text_item {
    margin-right: 10px;
  }
}
</style>
